{% extends 'customer_dashboard.html' %}

{% block content %}
<div class="card">
  <h2><i class="bi bi-lock"></i> 修改银行卡密码</h2>
  <p style="margin-top: 10px;">请选择您要修改密码的银行卡，并填写原密码、新密码及确认新密码：</p>

  {% if message %}
    <p style="color: {{ 'green' if success else 'red' }}; margin: 15px 0;">{{ message }}</p>
  {% endif %}

  <form method="POST" style="margin-top: 20px;">
    <div style="margin-bottom: 15px;">
      <label for="cardID"><i class="bi bi-credit-card"></i> 银行卡号：</label>
      <select name="cardID" id="cardID" required style="width: 100%; padding: 8px; border-radius: 6px; border: 1px solid #ccc; margin-top: 5px;">
        <option value="">-- 请选择卡号 --</option>
        {% for card in cards %}
          <option value="{{ card.cardID }}">{{ card.cardID }}</option>
        {% endfor %}
      </select>
    </div>

    <div style="margin-bottom: 15px;">
      <label for="old_password"><i class="bi bi-shield-lock"></i> 原密码：</label>
      <input type="password" name="old_password" id="old_password" required style="width: 100%; padding: 8px; border-radius: 6px; border: 1px solid #ccc;">
    </div>

    <div style="margin-bottom: 15px;">
      <label for="new_password"><i class="bi bi-lock-fill"></i> 新密码：</label>
      <input type="password" name="new_password" id="new_password" required style="width: 100%; padding: 8px; border-radius: 6px; border: 1px solid #ccc;">
    </div>

    <div style="margin-bottom: 15px;">
      <label for="confirm_password"><i class="bi bi-lock-fill"></i> 确认新密码：</label>
      <input type="password" name="confirm_password" id="confirm_password" required style="width: 100%; padding: 8px; border-radius: 6px; border: 1px solid #ccc;">
    </div>

    <div style="margin-top: 20px;">
      <button type="submit" class="btn btn-sm btn-secondary">确认修改</button>
      <a href="/customer/home" class="btn btn-sm btn-secondary" style="margin-left: 10px;">返回主页</a>

    </div>
  </form>
</div>
{% endblock %}
